<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script> 
    <script src="../js/bootstrap4.5.min.js"></script>
</head>
<style>
    /*https://fkwylsj10.jz.fkw.com/?previewDemo=true   首页 Team*/

    .imgText_mix_list{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .imgText_mix_list_left{
        width: 50%;
        height: 574px;
    }
    .imgText_mix_list_left img{
        width: 100%;
        height: 100%;
    }
    .imgText_mix_list_right{
        padding: 0px 0 0 40px;
        width: 50%;
    }
    .imgText_mix_list_right img{
        width: 100%;
        height: 300px;
    }
    .imgText_mix_list_right h2{
        margin: 40px 0 0 0;
        color: var(--c_theme);
        font-size: var(--f_title);
        line-height: var(--l_title);

    }
    .imgText_mix_list_right p{
        margin: 22px 0 0 0;
        color: var(--c_text);
        font-size: var(--f_text);
        line-height: var(--l_text);
        
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    @media(max-width:1200px){
        .imgText_mix_list{
            position: relative;
        flex-wrap: wrap;
    }
    .imgText_mix_list_left{
        width: 50%;
        height: 300px;
    }
    .imgText_mix_list_left img{
        width: 100%;
        height: 100%;
    }
    .imgText_mix_list_right{
        padding: 0px 0 0 0;
        width: 100%;
    }
    .imgText_mix_list_right img{
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 300px;
        padding: 0 20px 0 0 ;
    }
    .imgText_mix_list_right h2{
        margin: 20px 0 0 0;

    }
    .imgText_mix_list_right p{
        margin: 10px 0 0 0;
    }
    .imgText_mix_list_right button{
        margin-top: 32px;
    }
    }
    @media(max-width:768px){
    .imgText_mix_list_left{
        width: 100%;
    }
    .imgText_mix_list_right img{
        position: static;
        width: 100%;
        height: 300px;
        padding: 0 0 0 0 ;
    }
    }
    @media(max-width:550px){
    .imgText_mix_list_left{
        height: 200px;
    }
    .imgText_mix_list_right img{
        height: 200px;
    }
    }

</style>
<body>
    
    <div class="imgText_mix modular">
         <div class="imgText_mix_list public_width">
             <div class="imgText_mix_list_left">
                 <img src="../images/case_list_2_1.jpg" alt="">
             </div>
             <div class="imgText_mix_list_right">
                 <img src="../images/case_list_2_2.jpg" alt="">
                 <h2>Team</h2>
                 <p>目前拥有五大主创设计部门，团队成员均具有高学历、高度专业化及高度创新意识
                     。以为客户提供高品质的生态景观设计为己任，秉承“经济、美学、人居”设计理念。</p>
                 <button class="button_big">more</button>
             </div>

         </div>
    </div>
</body>
</html>